<!-- <loading :isLoading="true" color1="red" color2="blue" color3="yellow" color4="green" :fixed="false" bg="red/> -->
<template>
	<div class="loading" v-show="isLoading===true" :class="{fixed}" :style="{'--bg':bg,'--color1':color1,'--color2':color2,'--color3':color3,'--color4':color4}">
		<div class="content" :data-text="title">
			<div class="show1"></div>
			<div class="show2"></div>
			<div class="show3"></div>
			<div class="show4"></div>
		</div>
	</div>
</template>
<script setup>
defineProps({
	title: {
		type: String,
		default: "加载中..."
	},
	color1: {
		type: String,
		default: "#2979ff"
	},
	color2: {
		type: String,
		default: "#ff1744"
	},
	color3: {
		type: String,
		default: "#ffff8d"
	},
	color4: {
		type: String,
		default: "#b2ff59"
	},
	bg: {
		type: String,
		default: "#000"
	},
	isLoading:{
		type:Boolean,
		default:true
	},
	fixed:{
		type:Boolean,
		default:false
	}
})
</script>

<style scoped >
.fixed{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 999;
}
.loading {
	--color1:"#2979ff";
	--color2:"#ff1744";
	--color3:"#ffff8d";
	--color4:"#b2ff59";
	--bg:"#00";
	width: 100%;
	height: 100%;
	background-color: var(--bg);
	display: flex;
	align-items: center;
	justify-content: center;
}

.content {
	position: relative;
	width: 150px;
	min-width: 110px;
	overflow: visible;
	margin: 20px;
	border-radius: 50%;
	box-shadow: inset 0 0 8px rgb(255 255 255 / 40%), 0 0 25px rgb(255 255 255 / 80%);
}

.content::before {
	content: '';
	float: left;
	padding-top: 100%;
}

.content::after {
	content: attr(data-text);
	color: #CECECE;
	white-space: nowrap;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	font-size: calc(70% + 0.10vw);
	text-transform: uppercase;
	letter-spacing: 5px;
}

.text {
	position: relative;
	z-index: 1;
	background-color: #000000;
	width: 100%;
	height: 100%;
	border-radius: 50%;
}

.show1,
.show2,
.show3,
.show4 {
	position: absolute;
	border-radius: 50%;
	top: 0px;
	right: 0px;
	bottom: 0px;
	left: 0px;
	animation: rotate 2s infinite;
	opacity: 0.8;

	mix-blend-mode: screen;
	filter: brightness(120%);
}

.show1 {
	box-shadow: inset 1px 0 0 1px #2979ff, 3px 0 0 3px #2979ff;
	box-shadow: inset 1px 0 0 1px var(--color1), 3px 0 0 3px var(--color1);
	animation-direction: reverse;
	transform-origin: 49.6% 49.8%;
}

.show2 {
	box-shadow: inset 1px 0 0 1px #ff1744, 3px 0px 0 3px #ff1744;
	box-shadow: inset 1px 0 0 1px var(--color2), 3px 0px 0 3px var(--color2);
	transform-origin: 49.8% 49.8%;
}

.show3 {
	box-shadow: inset 1px 0 0 1px #ffff8d, 0 3px 0 3px #ffff8d;
	box-shadow: inset 1px 0 0 1px var(--color3), 0 3px 0 3px var(--color3);
	transform-origin: 49.5% 49.8%;
}

.show4 {
	box-shadow: inset 1px 0 0 1px #b2ff59, 0 3px 0 3px #b2ff59;
	box-shadow: inset 1px 0 0 1px var(--color4), 0 3px 0 3px var(--color4);
	transform-origin: 49.7% 49.7%;
}

@keyframes rotate {
	0% {
		transform: rotate(0);
	}

	100% {
		transform: rotate(-360deg);
	}
}</style>